<template>
    <div>
        <div
            v-for="route in routes"
            :key="route.redirect ? route.redirect : base + route.path"
        >
            <el-submenu
                v-show="route.children && !route.meta.hidden"
                :index="routePath(base, route)"
            >
                <template #title>
                    <i :class="route.meta.icon" />
                    <span>{{ subName('sidebar.' + route.meta.name, route.meta.name) }}</span>
                </template>
                <sub-tree
                    :routes="route.children"
                    :base="routePath(base, route)"
                />
            </el-submenu>
            <el-menu-item
                v-show="!route.children && !route.meta.hidden"
                :index="routePath(base, route)"
                @click="skip(routePath(base, route), route.meta)"
            >
                <i :class="route.meta.icon" />
                <template #title>
                    {{ subName('sidebar.' + route.meta.name, route.meta.name) }}
                </template>
            </el-menu-item>
        </div>
    </div>
</template>

<script>
export default {
    name: "SubTree",
    props: {
        routes: {
            type: Array,
            default: () => []
        },
        base: {
            type: String,
            default: ''
        }
    },
    methods: {
        routePath(base, route) {
            return base === '/' ? base + route.path : base === '' ? route.path : base + '/' + route.path
        },
        skip(path, meta) {
            if (meta.target) {
                if (meta.showIframe) {
                    window.open(meta.iframeUrl, '_blank');
                    return;
                }
                let {href} = this.$router.resolve({ path });
                window.open(href, '_blank');
            } else {
                this.$router.push({path})
            }
        },
        subName(i18nKey, val) {
            return this.$t(i18nKey) === i18nKey ? val : this.$t(i18nKey);
        }
    }
}
</script>

<style scoped>
    .el-menu-item:hover {
        background-color: #6b6b6b !important;
    }
</style>
